<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons/template_head::head('financingIntreduce')">

</head>
<body>

<script src="/vendors/echarts/echarts.min.js"></script>
<script src="/vendors/echarts/echarts.js"></script>

<!-- begin::preloader-->
<div th:replace="commons/layout::preloader">

</div>
<!-- end::preloader -->

<!-- begin::navigation -->
<div th:replace="commons/layout::navigation">

</div>
<!-- end::navigation -->

<!-- begin::main -->
<div id="main">

    <!-- begin::header -->
    <div th:replace="commons/layout::main_header">

    </div>
    <!-- end::header -->

    <!-- begin::main-content -->
    <div class="main-content bg-info-bright" style="background-color: #e0ffff!important;">

        <!-- begin::container -->
        <div class="container">

            <div class="row">
                <div class="container py-4">
                        <h2 class="bg-white pb-3 mb-4 d-flex align-items-center text-dark text-center rounded">
                            <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" class="bi bi-bank2" viewBox="0 0 16 16">
                                <path d="M8.277.084a.5.5 0 0 0-.554 0l-7.5 5A.5.5 0 0 0 .5 6h1.875v7H1.5a.5.5 0 0 0 0 1h13a.5.5 0 1 0 0-1h-.875V6H15.5a.5.5 0 0 0 .277-.916l-7.5-5zM12.375 6v7h-1.25V6h1.25zm-2.5 0v7h-1.25V6h1.25zm-2.5 0v7h-1.25V6h1.25zm-2.5 0v7h-1.25V6h1.25zM8 4a1 1 0 1 1 0-2 1 1 0 0 1 0 2zM.5 15a.5.5 0 0 0 0 1h15a.5.5 0 1 0 0-1H.5z"/>
                            </svg>
                            <span class="fs-4 mt-3">国泰利泽90天</span>
                        </h2>
                    <div class="text-center p-5 mb-4 bg-white rounded-3">
                        <div class="container-fluid py-5">
                            <h1 class=" display-5 fw-bold text-danger">年化收益率：2.79%</h1>
                            <ul class="list-unstyled mt-4 mb-4">
                                <li>主动配置攻守兼备，权益组合重点配置高景气且估值合理的板块，高频动态再平衡，权益仓位高度分散，且兼顾收益和稳定。</li>
                                <li>费后投资收益均归客户，本产品的全部投资收益，扣除销售费用、管理费用及托管费用后，剩余部分均归客户所有。</li>
                                <li>最低持有保障客户利益,最低持有730天，既保障投资经理贯彻投资策略，布局长远，也帮助客户告别追涨杀跌</li>
                                <li>最新净值：1.041570</li>
                                <li>风险等级：中等</li>
                                <li><form name="Sum"><h2>请输入您购买的金额：
                                    <input class="text" name="Sum"></h2></form></li>
                            </ul>
                            <a href="#modal" class="btn btn-info" data-toggle="modal">立即购买</a>

                            <div class="modal fade" id="modal">
                                <div class="modal-dialog modal-lg">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h3 class="modal-title text-center">购买提示</h3>
                                            <span class="close" data-dismiss="modal">&times;</span>
                                        </div>
                                        <div class="modal-body">
                                            <p>
                                                您已购买本产品成功！请您注意查收信息。祝您生活愉快！
                                            </p>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="row align-items-md-stretch text-center">
                        <div class="col-md-6">
                            <div class="h-100 p-5 text-white bg-dark rounded-3">
                                <h2>产品细则</h2>
                                <ul class="list-unstyled mt-4 mb-4">
                                    <li>|一最低持有730天—|</li>
                                    <li>每天09:00-15:00提出申购申请，份额于T+2日(工作日，遇非工作曰顺延至下一工作日)进行确认。</li>
                                    <li>申购资金T日(工作日,遇非工作日顺延至下一工作日)扣划。</li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="h-100 p-5 bg-white border rounded-3">
                                <h2>交易规则</h2>
                                <ul class="list-unstyled mt-4 mb-4">
                                    <li>购买规则:每个产品工作日的9:00至15:00可申购</li>
                                    <li>赎回规则:持有满730天。每个工作日9点至赎回开放日当日15点可赎回</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                 </div>
            </div>
            <div class="row">
                <div class="col-md-12 bg-white">
                    <div id="echt" style="width: 1100px;height: 500px"></div>
                </div>
            </div>



        </div>
        <!-- end::container -->

    </div>
    <!-- end::main-content -->

    <!-- begin::footer -->
    <footer th:replace="commons/layout::main_footer">

    </footer>
    <!-- end::footer -->

</div>
<!-- end::main -->

<div th:replace="commons/layout::end">

</div>
<script type="text/javascript">

    let myEcharts = echarts.init(document.getElementById('echt'));


    const upColor = '#ec0000';
    const upBorderColor = '#8A0000';
    const downColor = '#00da3c';
    const downBorderColor = '#008F28';
    const dataCount = 2e5;
    const data = generateOHLC(dataCount);
    option = {
        dataset: {
            source: data
        },
        title: {
            text: "本基金历年来的收益率图"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        grid: [
            {
                left: '10%',
                right: '10%',
                bottom: 200
            },
            {
                left: '10%',
                right: '10%',
                height: 80,
                bottom: 80
            }
        ],
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                // inverse: true,
                axisLine: { onZero: false },
                splitLine: { show: false },
                min: 'dataMin',
                max: 'dataMax'
            },
            {
                type: 'category',
                gridIndex: 1,
                boundaryGap: false,
                axisLine: { onZero: false },
                axisTick: { show: false },
                splitLine: { show: false },
                axisLabel: { show: false },
                min: 'dataMin',
                max: 'dataMax'
            }
        ],
        yAxis: [
            {
                scale: true,
                splitArea: {
                    show: true
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                axisLabel: { show: false },
                axisLine: { show: false },
                axisTick: { show: false },
                splitLine: { show: false }
            }
        ],
        visualMap: {
            show: false,
            seriesIndex: 1,
            dimension: 6,
            pieces: [
                {
                    value: 1,
                    color: upColor
                },
                {
                    value: -1,
                    color: downColor
                }
            ]
        },
        series: [
            {
                type: 'candlestick',
                itemStyle: {
                    color: upColor,
                    color0: downColor,
                    borderColor: upBorderColor,
                    borderColor0: downBorderColor
                },
                encode: {
                    x: 0,
                    y: [1, 4, 3, 2]
                }
            },
            {
                name: 'Volumn',
                type: 'bar',
                xAxisIndex: 1,
                yAxisIndex: 1,
                itemStyle: {
                    color: '#7fbe9e'
                },
                large: true,
                encode: {
                    x: 0,
                    y: 5
                }
            }
        ]
    };
    function generateOHLC(count) {
        let data = [];
        let xValue = +new Date(2022, 0, 1);
        let minute = 60 * 1000;
        let baseValue = Math.random() * 12000;
        let boxVals = new Array(4);
        let dayRange = 12;
        for (let i = 0; i < count; i++) {
            baseValue = baseValue + Math.random() * 20 - 10;
            for (let j = 0; j < 4; j++) {
                boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
            }
            boxVals.sort();
            let openIdx = Math.round(Math.random() * 3);
            let closeIdx = Math.round(Math.random() * 2);
            if (closeIdx === openIdx) {
                closeIdx++;
            }
            let volumn = boxVals[3] * (1000 + Math.random() * 500);
            // ['open', 'close', 'lowest', 'highest', 'volumn']
            // [1, 4, 3, 2]
            data[i] = [
                echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', (xValue += minute)),
                +boxVals[openIdx].toFixed(2),
                +boxVals[3].toFixed(2),
                +boxVals[0].toFixed(2),
                +boxVals[closeIdx].toFixed(2),
                +volumn.toFixed(0),
                getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
            ];
        }
        return data;
        function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
            var sign;
            if (openVal > closeVal) {
                sign = -1;
            } else if (openVal < closeVal) {
                sign = 1;
            } else {
                sign =
                    dataIndex > 0
                        ? // If close === open, compare with close of last record
                        data[dataIndex - 1][closeDimIdx] <= closeVal
                            ? 1
                            : -1
                        : // No record of previous, set to be positive
                        1;
            }
            return sign;
        }
    }
    // 使用刚指定的配置项和数据显示图表。
    myEcharts.setOption(option);
    window.onresize = function (){
        myEcharts.resize();
    }
</script>
</body>
</html>


